//评论提交组件
import React,{useState} from "react";
import * as Action from "../../common/Action"
import {IconRobotAdd,IconCommon } from "@arco-design/web-react/icon"
export function MessageInput({submitMessage,style}:{submitMessage:Function,style:any}){
    let [isSecret,setSecret]=useState(false)
    let timeout:any=null
    let inputValue=""
    let fromUser=""
    let maessageContent={
        value:null,
        user:null
    }
    function input(e){
        clearTimeout(timeout)
        timeout=setTimeout(()=>{
            maessageContent.value=e.target
            inputValue=e.target.value
        },200)
    }
    function inputUser(e){
        clearTimeout(timeout)
        timeout=setTimeout(()=>{
            maessageContent.user=e.target
            fromUser=e.target.value
        },200)
    }
    function submit(){
        if(inputValue.length==0 || fromUser.length==0){
            Action.Tips({
                type:'warn',
                content:'评论失败',
                tip:"请填写内容与联系信息"
            })
            return 
        }
        //先提交到对应内容后执行父组件渲染
        for(let key in maessageContent){
            maessageContent[key].value=''
        }
        Action.Message({
            type:'success',
            content:"评论成功"
        })
        
        submitMessage(inputValue,fromUser)
    }
    function changeSecret(e){
        setSecret(e.target.checked)
    }
    let inputBg=style?.backgroundColor!=='var(--bg-2)'?'var(--bgPure-1)':'var(--bgPure-1)'
    return (
        <div className="inputMessageContainer" style={style}>
            <div style={{
                float:'left',
                width:'auto',
                height:'30px',
                lineHeight:'30px',
                color:'var(--colorText-2)',
                fontSize:'18px',
                marginTop:'30px',
                marginBottom:'15px',
                fontWeight:'400'
            }}>发表评论</div>
            <div style={{clear:"both"}}></div>
            <div style={{
                float:'left',
                width:'auto',
                height:'30px',
                lineHeight:'30px',
                color:'var(--colorText-2)',
                fontSize:'1em',
                marginBottom:'10px'
            }}>评论</div>
            <div style={{
                float:'left',
                width:'auto',
                height:'30px',
                lineHeight:'30px',
                marginLeft:'8px',
                color:'red',
                fontSize:'1em'
            }}>*</div>
            <div style={{clear:"both"}}></div>
            <textarea className="messageTextArea" 
                style={{backgroundColor:isSecret?'#999':inputBg}} onInput={input}></textarea>
            <div className="inputMiddle">
                <div className="emoji">
                    <IconRobotAdd style={{color:"var(--colorText-2)",marginTop:0,fontSize:'16px',margin:'5px',marginLeft:"10px"}}/>
                    <div style={{height:"25px",lineHeight:'25px',fontSize:'12px'}}>表情</div>
                </div>
                <div className="secret">
                    <div style={{height:"25px",lineHeight:'25px',fontSize:'14px',color:'var(--colorText-1)'}}>私密评论</div>
                    <input onChange={changeSecret} type="checkbox" className="secretButton"/>
                    <div className="openSecret">
                        <div className="openSecretCircle"></div>
                    </div>
                </div>
            </div>
            <div className="messageUserInfo">
                <div className="messageInfoItem">
                    <div style={{
                        float:'left',
                        width:'auto',
                        height:'30px',
                        lineHeight:'30px',
                        color:'var(--colorText-1)',
                        fontSize:'1em'
                    }}>名称</div><div style={{
                        float:'left',
                        width:'auto',
                        height:'30px',
                        lineHeight:'30px',
                        marginLeft:'8px',
                        color:'red',
                        fontSize:'1em'
                    }}>*</div>
                    <div style={{clear:"both"}}></div>
                    <input className="messageInputItem" onInput={inputUser}></input>
                    <IconCommon style={{position:'absolute',right:'10px',fontSize:'16px',bottom:'5px',color:"var(--colorText-2)"}}/>
                </div>
                <div className="messageInfoItem">
                    <div style={{
                        float:'left',
                        width:'auto',
                        height:'30px',
                        lineHeight:'30px',
                        color:'var(--colorText-1)',
                        fontSize:'1em'
                    }}>联系邮箱</div><div style={{
                        float:'left',
                        width:'auto',
                        height:'30px',
                        lineHeight:'30px',
                        marginLeft:'8px',
                        color:'red',
                        fontSize:'1em'
                    }}>*</div>
                    <div style={{clear:"both"}}></div>
                    <input className="messageInputItem" placeholder="内容保密"></input>
                </div>
                <div className="messageInfoItem">
                    <div style={{
                        float:'left',
                        width:'auto',
                        height:'30px',
                        lineHeight:'30px',
                        color:'var(--colorText-1)',
                        fontSize:'1em'
                    }}>地址</div>
                    <div style={{clear:"both"}}></div>
                    <input className="messageInputItem" placeholder="内容保密"></input>
                </div>
            </div>
            
            <div className="submitButton" onClick={submit}>提交评论</div>
        </div>
    )
}